
<div style="POSITION: relative" id="content">
  <h3>easyUI合并DataGrid单元格</h3>
  <div id="article_content" class="article_content">
    <p>datagrid经常需要合并一些单元&#26684;,这个教程将向你展示如何在datagrid合并单元&#26684;.</p>
    <p>合并你的datagrid 单元格,简单的调用'mergeCells' 方法和传入合并信息参数告诉datagrid 如何合并单元格,在所有合并单元格中,除了第一个单元格,单元&#26684;合并.</p>
    <p><img src="documentation/images/1344651977_5094.png" alt=""></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 创建DataGrid</h4>
    <p>
    <pre name="code" class="html">&lt;table id=&quot;tt&quot; title=&quot;Merge Cells&quot; style=&quot;width:550px;height:250px&quot;  
        url=&quot;data/datagrid_data.json&quot;  
        singleSelect=&quot;true&quot; iconCls=&quot;icon-save&quot; rownumbers=&quot;true&quot;  
        idField=&quot;itemid&quot; pagination=&quot;true&quot;&gt;  
    &lt;thead frozen=&quot;true&quot;&gt;  
        &lt;tr&gt;  
            &lt;th field=&quot;productid&quot; width=&quot;80&quot; formatter=&quot;formatProduct&quot;&gt;Product ID&lt;/th&gt;  
            &lt;th field=&quot;itemid&quot; width=&quot;100&quot;&gt;Item ID&lt;/th&gt;  
        &lt;/tr&gt;  
    &lt;/thead&gt;  
    &lt;thead&gt;  
        &lt;tr&gt;  
            &lt;th colspan=&quot;2&quot;&gt;Price&lt;/th&gt;  
            &lt;th rowspan=&quot;2&quot; field=&quot;attr1&quot; width=&quot;150&quot;&gt;Attribute&lt;/th&gt;  
            &lt;th rowspan=&quot;2&quot; field=&quot;status&quot; width=&quot;60&quot; align=&quot;center&quot;&gt;Stauts&lt;/th&gt;  
        &lt;/tr&gt;  
        &lt;tr&gt;  
            &lt;th field=&quot;listprice&quot; width=&quot;80&quot; align=&quot;right&quot;&gt;List Price&lt;/th&gt;  
            &lt;th field=&quot;unitcost&quot; width=&quot;80&quot; align=&quot;right&quot;&gt;Unit Cost&lt;/th&gt;  
        &lt;/tr&gt;  
    &lt;/thead&gt;  
&lt;/table&gt; </pre>
    </p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 合并单元&#26684;</h4>
    当数据加载之后,我们合并一些在datagrid中的单元&#26684;,所以放置以下在<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">onLoadSuccess 回调函数中.</span>
    <p></p>
    <p>
    <pre name="code" class="javascript">$('#tt').datagrid({  
    onLoadSuccess:function(){  
        var merges = [{  
            index:2,  
            rowspan:2  
        },{  
            index:5,  
            rowspan:2  
        },{  
            index:7,  
            rowspan:2  
        }];  
        for(var i=0; i&lt;merges.length; i++)  
            $('#tt').datagrid('mergeCells',{  
                index:merges[i].index,  
                field:'productid',  
                rowspan:merges[i].rowspan  
            });  
    }  
}); </pre>
    </p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载 EasyUI 示例代码:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://www.jeasyui.com/tutorial/datagrid/downloads/easyui-datagrid13-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-datagrid-demo.zip</a></div>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>